<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">





  <title>CodePen - Daily UI #006 User Profile</title>

  <!-- <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> -->

</head>
<!-- https://www.runoob.com/font-awesome/fontawesome-reference.html -->
<body>
  <div class="sphere" id="sphere">

    <div class="content">

      <div class="btn">
        <span></span>
      </div>
    </div>
    <div class="box" id="box">
      <i class="fa fa-home"></i>
      <!-- <i class="fa fa-facebook"></i> -->
      <i class="fa fa-money"></i>
      <!-- <i class="fa fa-tumblr"></i> -->
      <i class="fa fa-rocket"></i>
    </div>
  </div>

  <script>
    function loadStyle(){
      const script =  document.createElement('link')
      script.rel="stylesheet"
      script.href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"
      document.head.appendChild(script)
    }

    function loadStyleCss(){
      let css =`
      .sphere {
        width: 130px;
        height: 100px;
        position: fixed;
        top: 50%;
        left: 0px;
        /* transform: translate(-50%, -50%); */
        border-radius: 5px;
        /* background-color: #fafafa; */
        /*box-shadow: 0 0 2rem #babbbc;*/

         transform: scale(1.2); 
      }

      @keyframes show-sphere {
        0% {
          width: 0;
        }
      }

      .btn {
        background-color: #abc;
        width: 50px;
        height: 50px;
        position: absolute;
        right: 80px;
        top: 25px;
        border-radius: 50%;
        z-index: 1;
        cursor: pointer;
        transition-duration: 0.3s;
        animation: pop-btn 0.3s both ease-in-out 0.5s;
      }

      .box {
        width: 150px;
        height: 150px;
        opacity: 0;
        border-radius: 50%;
        /* background-color: rgba(255, 255, 255, 0.7); */
        position: absolute;
        top: 50%;
        right: -40%;
        transform: translate(-50%, -50%);
        transition-duration: 0.3s;
      }

      .sphere .box i {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #ececec;
        font-size: 26px;
        text-align: center;
        line-height: 50px;
        position: absolute;
        left: 18px;
        top: calc(75px - 50px/2);
        box-shadow: 0 0 0.5rem #babbbc;
        transition-duration: 0.3s;
      }

      .sphere .box i:hover {
        transition-delay: initial !important;
        box-shadow: 0 0 0 5px #babbbc;
      }

      .sphere .box.open {
        opacity: 1;
      }

      .sphere .box.open i {
        /*这里跟上面对应*/
        left: 50px;
      }

      /* 五个样式 */
      /* .sphere .box.open i:nth-of-type(1) {
          transform: rotate(-90deg) translateX(100px) rotate(90deg);
          transition-delay: 0s;
        }

        .sphere .box.open i:nth-of-type(2) {
          transform: rotate(-45deg) translateX(100px) rotate(45deg);
          transition-delay: 0.1s;
        }

        .sphere .box.open i:nth-of-type(3) {
          transform: rotate(0deg) translateX(100px) rotate(0deg);
          transition-delay: 0.2s;
        }

        .sphere .box.open i:nth-of-type(4) {
          transform: rotate(45deg) translateX(100px) rotate(-45deg);
          transition-delay: 0.3s;
        }

        .sphere .box.open i:nth-of-type(5) {
          transform: rotate(90deg) translateX(100px) rotate(-90deg);
          transition-delay: 0.4s;
        } */

      .sphere .box.open i:nth-of-type(1) {
        transform: rotate(-90deg) translateX(100px) rotate(90deg) scale(1.5);
        transition-delay: 0s;
      }

      .sphere .box.open i:nth-of-type(2) {
        transform: rotate(0deg) translateX(80px) rotate(0deg) scale(1.5);
        transition-delay: 0.1s;
      }

      .sphere .box.open i:nth-of-type(3) {
        transform: rotate(90deg) translateX(100px) rotate(-90deg) scale(1.5);
        transition-delay: 0.2s;
      }
      `
    let addStyle = cssStr => {
        let styleEle = document.createElement("style");
        styleEle.setAttribute("class","data_sidebar")
        styleEle.innerHTML = cssStr;
        document.head.appendChild(styleEle);
        return styleEle;
    };
    addStyle(css)
    }


    function toggleClass(idName, className) {
      document.getElementById(idName).classList.toggle(className)

    }
    document.querySelector(".btn").addEventListener("click", (e) => {
      toggleClass("box", "open")
    })
    document.querySelector(".box").addEventListener("click", (e) => {
      alert(e.target.getAttribute("class"))
    })
    function dragEventFunction(idName) {
      var fdiv = document.getElementById(idName);
      fdiv.onmousedown = function (e) {
        screenWidth = document.documentElement.clientWidth;
        screenHeight = document.documentElement.clientHeight;
        if (!e) { e = window.event; } //IE
        posX = e.clientX - parseInt(fdiv.style.left);
        posY = e.clientY - parseInt(fdiv.style.top);
        document.onmousemove = mousemove;
      }
      document.onmouseup = function ()//释放时自动贴到最近位置
      {
        document.onmousemove = null;
        if ((parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight) / 2) <= (screenHeight / 2)) {//在上半部分
          if ((parseInt(fdiv.style.left) + parseInt(fdiv.clientWidth) / 2) <= (screenWidth / 2)) {//在左半部分
            if ((parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight) / 2) <= (parseInt(fdiv.style.left) + parseInt(fdiv.clientWidth) / 2)) {//靠近上方
              fdiv.style.top = "0px";
            } else {//靠近左边
              fdiv.style.left = "0px";
            }
          } else {//在右半部分
            if ((parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight) / 2) <= (screenWidth - (parseInt(fdiv.style.left) + parseInt(fdiv.clientWidth) / 2))) {//靠近上方
              fdiv.style.top = "0px";
            } else {//靠近右边
              // fdiv.style.left = (screenWidth - parseInt(fdiv.clientWidth)) + "px";
            }
          }
        } else { //下半部分
          if ((parseInt(fdiv.style.left) + parseInt(fdiv.clientWidth) / 2) <= (screenWidth / 2)) {//在左半部分
            if ((screenHeight - (parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight) / 2)) <= (parseInt(fdiv.style.left) + parseInt(fdiv.clientWidth) / 2)) {//靠近下方
              fdiv.style.top = (screenHeight - parseInt(fdiv.clientHeight)) + "px";
            } else {//靠近左边
              fdiv.style.left = "0px";
            }
          } else {//在右半部分
            if ((screenHeight - (parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight) / 2)) <= (screenWidth - (parseInt(fdiv.style.left) + parseInt(fdiv.clientWidth) / 2))) {//靠近上方
              fdiv.style.top = (screenHeight - parseInt(fdiv.clientHeight)) + "px";
            } else {//靠近右边
              // fdiv.style.left = (screenWidth - parseInt(fdiv.clientWidth)) + "px";
            }
          }
        }
      }
      function mousemove(ev) {
        if (ev == null) { ev = window.event; }//IE
        if ((ev.clientY - posY) <= 0) {//超过顶部
          fdiv.style.top = "0px";
        } else if ((ev.clientY - posY) > (screenHeight - parseInt(fdiv.clientHeight))) {//超过底部
          fdiv.style.top = (screenHeight - parseInt(fdiv.clientHeight)) + "px";
        } else {
          fdiv.style.top = (ev.clientY - posY) + "px";
        }

        if ((ev.clientX - posX) <= 0) {//超过左边
          fdiv.style.left = "0px";
        } else if ((ev.clientX - posX) > (screenWidth - parseInt(fdiv.clientWidth))) {//超过右边
          fdiv.style.left = (screenWidth - parseInt(fdiv.clientWidth)) + "px";
        } else {
          fdiv.style.left = (ev.clientX - posX) + "px";
        }
        // console.log( posX +" "+ fdiv.style.left);

      }
      window.onload = window.onresize = function () { //窗口大小改变事件
        screenWidth = document.documentElement.clientWidth;
        screenHeight = document.documentElement.clientHeight;
        if ((parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight)) > screenHeight) {//窗口改变适应超出的部分
          fdiv.style.top = (screenHeight - parseInt(fdiv.clientHeight)) + "px";
        }
        if ((parseInt(fdiv.style.left) + parseInt(fdiv.clientWidth)) > screenWidth) {//窗口改变适应超出的部分
          fdiv.style.left = (screenWidth - parseInt(fdiv.clientWidth)) + "px";
        }
        document.onmouseup.apply()
      };
      fdiv.addEventListener('touchstart', fdiv.onmousedown, false);
      fdiv.addEventListener('touchmove', function (event) {
        // 如果这个元素的位置内只有一个手指的话
        if (event.targetTouches.length == 1) {
          event.preventDefault();// 阻止浏览器默认事件，重要 
          var touch = event.targetTouches[0];
          if ((touch.pageY) <= 0) {//超过顶部
            fdiv.style.top = "0px";
          } else if (touch.pageY > (screenHeight - parseInt(fdiv.clientHeight))) {//超过底部
            fdiv.style.top = (screenHeight - parseInt(fdiv.clientHeight)) + "px";
          } else {
            fdiv.style.top = (touch.pageY - parseInt(fdiv.clientHeight) / 2) + "px";
          }

          if (touch.pageX <= 0) {//超过左边
            fdiv.style.left = "0px";
          } else if (touch.pageX > (screenWidth - parseInt(fdiv.clientWidth))) {//超过右边
            fdiv.style.left = (screenWidth - parseInt(fdiv.clientWidth)) + "px";
          } else {
            fdiv.style.left = (touch.pageX / 2) + "px";
          }
        }
      }, false);
      fdiv.addEventListener('touchend', document.onmouseup, false);
      fdiv.onclick = function () {//点击事件可能在手机端浏览器会与网页缩放事件冲突
        // alert("触发了点击事件！");
      }
    }
    
    loadStyle()
    setTimeout(() => {
      loadStyleCss()
    }, 30);
    dragEventFunction("sphere")
  </script>
</body>

</html>